<template>
   <div>
        <center>
            <!-- 二维码图片 -->
            <img v-if="qrDataURL" :src="qrDataURL" class="qr-image">
            <!-- 文字说明 -->
            <div v-if="showText" class="code-text">{{ code }}</div>
            <a-button type="primary" @click="downloadCombinedImage">下载二维码</a-button>
        </center>
   </div>
</template>
<script>

import QRCode from 'qrcode'

export default {
    name:'ExtQrCode',
    components:{},
    props:{
        componentRef:[String,Number],
        qrCode:String,
        showText:Boolean,
        width:{
            type:Number,
            default:200
        },
        height:{
            type:Number,
            default:200
        },
        pageObject:[Object]

       
    },
   
    data(){
        return{
            qrDataURL: null,
            code:''
        }
    },
    computed:{
       
    },
    watch:{
        
    },
    created(){
        
    },
    mounted () {
        
        this.$nextTick(() => {
            this.code = this.pageObject.model[this.qrCode]
            this.generateQRCode(this.code)
        })
    },
    methods:{
       generateQRCode(qrCode) {
        
            const options = {
                width: this.width,
                margin: 2,
                errorCorrectionLevel: 'H'
            }
            if(qrCode){
                QRCode.toDataURL(qrCode, options)
                    .then(url => {
                        this.qrDataURL = url
                    }).catch(console.error)
            }
        },
        downloadCombinedImage(){
            if (!this.qrDataURL || !this.code) return

            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')
            
            // 加载二维码图片
            const img = new Image()
            img.src = this.qrDataURL
            img.crossOrigin = "Anonymous"

            img.onload = () => {
                // 设置canvas尺寸（二维码高度 + 文字区域高度）
                const qrSize = img.height
                const textHeight = 40 // 文字区域预留高度
                canvas.width = qrSize
                canvas.height = qrSize + textHeight
                
                // 绘制二维码
                ctx.drawImage(img, 0, 0, qrSize, qrSize)
                
                // 绘制文字背景
                ctx.fillStyle = '#ffffff'
                ctx.fillRect(0, qrSize, qrSize, textHeight)
                
                // 绘制设备编码文字
                ctx.fillStyle = '#333333'
                ctx.font = '16px Arial'
                ctx.textAlign = 'center'
                ctx.textBaseline = 'middle'
                ctx.fillText(
                    this.code, 
                    qrSize / 2,       // x居中
                    qrSize + textHeight / 2 // y居中在文字区域
                )
                
                // 转换为图片并触发下载
                const link = document.createElement('a')
                link.download = `二维码_${this.code}.png`
                link.href = canvas.toDataURL('image/png')
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link)
            }
        }
        
    }
}
</script>

<style scoped>
.qr-code-container {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.qr-image {
  /* 二维码图片样式 */
  width: 200px;
  height: 200px;
  margin-bottom: 10px;
  border: 1px solid #eee;
}

.code-text {
  /* 设备编码文字样式 */
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  color: #333;
  letter-spacing: 1px;
  text-align: center;
  padding: 5px 0;
}
.download-button {
  margin-top: 15px;
  padding: 8px 16px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.download-button:hover {
  background: #66b1ff;
}

.download-button:active {
  background: #3a8ee6;
}
</style>